<template>
  <div>
    <h3>注册</h3>
    <hr>
    <!-- logo 区域 -->
    <div class="logo">
      <van-image class="logo-img" position="center" fit="cover" round width="100px" height="100px"
 src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
 <h2>名称：xxxxxx</h2>
    </div>
    <!-- 输入框 -->
    <van-cell-group inset>
  <van-field
    left-icon="phone"
    placeholder="输入手机号码"
    color="#ccc"
  />
  <van-field
    clearable
    left-icon="lock"
    right-icon="closed-eye"
    placeholder="输入6-12位字母、数字"
  />
  <van-field
    center
    clearable
    label="短信验证码"
  >
    <template #button>
      <van-button style="background-color: #BA6608; color: #fff;" size="small" >获取验证码</van-button>
    </template>
  </van-field>
</van-cell-group>

<!-- 注册按钮 -->
<van-button 
class="btn"
 size="large" @click="$router.push('/register')">注册并登录</van-button>
<div class="login-wz">
   <span @click="$router.push('/login')">已有账号&nbsp;立即登录</span>
   </div>

  </div>
</template>

<script setup lang="ts">


</script>

<style scoped lang="scss">
h3 {
  color: #111;
  text-align: center;
  padding: 10px;
}
.logo{
  width: 200px;
  height: 200px;
  position: relative;
  margin: 0 auto;
  .logo-img{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
  }
}
.login-wz{
  color: #666;
  padding: 10px;
  display: flex;
  justify-content: center;
  font-size:14px;
  }
  .btn{
    background-color: #BA6608;
    color: #fff;
     width: 320px;
     margin:0 auto;
     display: block;
     margin-top: 35px;
  }
</style>